<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<p>
			年度 <input type="text"  name="year"/>
			月份 <input type="text" name="month"/> 
			<button>查询</button>
		</p>
		 <span id="yearError"></span>
		 <span id="monthError"></span>
		<script >
		/*1、获取元素对象
		  2、验证年份的函数
		  3、验证月份的函数
		  4、年份和月份添加失去焦点事件
		  */
		 //1、获取元素对象
		 var inputs=document.getElementsByTagName('input');
		 var yearError=document.getElementById('yearError');
		 var monthError=document.getElementById('monthError');
		 //2、验证年份的函数：4位数字
		 function checkYear(obj){
		 	//验证obj内的值是否是4位数字
		 	var str=obj.value;
		 	//4位数字的正则表达式:\d表示0-9的数字，{n}表示前面的字符出现n次
		 	var reg=/^\d{4}$/;
		 	if(!str.match(reg)){//不匹配的时候
		 		yearError.innerHTML="输入错误，年份为4位数字";
		 	}else{
		 		yearError.innerHTML='';
		 	}
		 }
		 
		 
		 function checkMonth(obj){
		 	var str=obj.value;
		 	var reg=/^(0?[1-9]|1[0-2])$/;
		 	if(!str.match(reg)){
		 		yearError.innerHTML="输入错误";
		 	}else{
		 		yearError.innerHTML='';
		 	}
		 }
		 
		 //年份输入框添加失去焦点事件
		 inputs[0].onblur=function(){
		 	checkYear(this);
		 }

		 inputs[1].onblur=function(){
		 	checkMonth(this);
		 }
		</script>
	</body>
  
</html>